<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 自有房产管理编辑 -->

    <a-spin :spinning="loading">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :rules="editModel != 0 ? rules : {}"
      >
        <!-- 表单 -->
        <a-card :bordered="false">
          <title-name title="基本信息" />

          <custom-form
            :form-list="formList"
            :form="form"
            :edit-model="editModel == 0 ? '' : ''"
          />
          <!-- </a-form-model> -->
        </a-card>
        <a-card :bordered="false">
          <!-- 附件上传 -->
          <title-name title="附件" />

          <a-row :gutter="24">
            <a-col
              v-if="editModel != 0"
              :md="24"
              :sm="24"
            >
              <a-form-model-item
                label="*购买请示批复报告"
                prop="prars"
              >
                <l-table
                  count="5"
                  business-code="OF02"
                  :upload-arrys.sync="form.prars"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              v-else
              :md="24"
              :sm="24"
            >
              <a-form-model-item label="*购买请示批复报告">
                <file-link :file-list="form.prars" />
              </a-form-model-item>
            </a-col>
            <a-col
              v-if="editModel != 0"
              :md="24"
              :sm="24"
            >
              <a-form-model-item
                label="*房屋产权证书"
                prop="htcs"
              >
                <l-table
                  count="5"
                  business-code="OF02"
                  :upload-arrys.sync="form.htcs"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              v-else
              :md="24"
              :sm="24"
            >
              <a-form-model-item label="*房屋产权证书">
                <file-link :file-list="form.htcs" />
              </a-form-model-item>
            </a-col>
            <a-col
              v-if="editModel != 0"
              :md="24"
              :sm="24"
            >
              <a-form-model-item
                label="*发票电子版"
                prop="eis"
              >
                <l-table
                  count="5"
                  business-code="OF02"
                  :upload-arrys.sync="form.eis"
                />
              </a-form-model-item>
            </a-col>
            <a-col
              v-else
              :md="24"
              :sm="24"
            >
              <a-form-model-item label="*发票电子版">
                <file-link :file-list="form.eis" />
              </a-form-model-item>
            </a-col>

            <a-col
              :md="24"
              :sm="24"
            >
              <div class="file_prompt ml20">
                支持格式：.rar .zip doc. docx. xls. pdf. jpg .png，单个附件大小不得超过200M
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </a-spin>
    <!-- 页脚操作栏 -->
    <div class="tool-btns page-btn-right-top">
      <a-button
        v-if="editModel != 0"
        :loading="loading"
        type="primary"
        class="button_right"
        @click="handleSubmit"
      >
        提交
      </a-button>
      <a-button
        class="ml20"
        type="primary"
        @click="handleClose"
      >
        关闭
      </a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import { getHomeOwnership, addHomeOwnership, updateHomeOwnership } from '@/api/office/propertyManagement' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import TreeSelectOrganization from '@/components/TreeSelectOrganization'
import Selector from '@/components/Select/Selector'
import SelectPersonByProject from '@/components/Select/SelectPersonByProject'
export default {
  extends: new BaseEditPage(),
  data() {
    return {
      loading: false, // 加载控件
      editModel: 0, // 操作状态:0 查看;1 编辑;2 新增
      form: {
        orgDeptName: '',
        orgDeptId: ''
      },
      rules: {
        owner: [{ required: true, whitespace: true, message: '请输入产权单位', trigger: 'change' }],
        placeName: [{ required: true, message: '请输入小区名称', trigger: 'change' }],
        placeAddress: [{ required: true, message: '请输入房屋地址', trigger: 'change' }],
        houseNum: [{ required: true, message: '请输入门牌号', trigger: 'change' }],
        builtArea: [{ required: true, message: '请输入建筑面积(m²)', trigger: 'change' }],
        houseUseId: [{ required: true, message: '请选择房屋用途 ', trigger: 'change' }],
        houseAmount: [{ required: true, message: '请输入房产原值(元) ', trigger: 'change' }],
        buyHouseDaye: [{ required: true, message: '购房时间', trigger: 'change' }],
        propertyFeeAmount: [{ required: true, message: '物业费(元/月)', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        prars: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }],
        htcs: [{ type: 'array', required: true, message: '请上传文件', trigger: 'blur' }]
      }, // 校验规则
      init: false, // 初始化控件
      formCode: '' // 形式选中项code
    }
  },
  watch: {
    // 监听附件实现附件校验
    'form.prars'() {
      if (this.editModel != 0 && this.init) {
        this.$nextTick(() => {
          this.$refs.ruleForm?.validateField('prars')
        })
      }
    },
    // 监听附件实现附件校验
    'form.htcs'() {
      if (this.editModel != 0 && this.init) {
        this.$nextTick(() => {
          this.$refs.ruleForm?.validateField('htcs')
        })
      }
    },
    // 监听附件实现附件校验
    'form.eis'() {
      if (this.editModel != 0 && this.init) {
        this.$nextTick(() => {
          this.$refs.ruleForm?.validateField('eis')
        })
      }
    }
  },
  mounted() {
    let userInfo = JSON.parse(sessionStorage.getItem('ycloud-user_info'))
    this.form.orgDeptName = (userInfo.currentPost.code === 'PD' ? userInfo.currentPost.orgName + '-' : '') + userInfo.currentPost.name
    this.form.orgDeptId = userInfo.currentPost.id
    this.$route.meta.title = ['自有房产管理查看', '自有房产管理编辑', '自有房产管理新增'][this.editModel]
    // 不为添加时请求详情
    if (this.editModel != 2) {
      this.loading = true
      getHomeOwnership(this.id)
        .then((res) => {
          this.loading = false

          this.form = res.data

          this.$nextTick(() => {
            this.init = true
          })
        })
        .catch(() => {
          this.loading = false
        })
    } else {
      this.$nextTick(() => {
        this.init = true
      })
    }
  },
  computed: {
    formList() {
      return [
        {
          keyName: 'orgDeptName',
          type: TreeSelectOrganization,
          label: '单位',
          disabled: true,
          attrs: {
            orgQuery: {
              containTags: ['CO', 'BC', 'PD'],
              resultWithCODept: true,
              resultWithBCDept: true,
              resultWithPDDept: true
            },
            containVirtual: true
          }
        },

        {
          keyName: 'owner',
          type: 'BaseInput',
          disabled: this.editModel == 0,
          label: '产权单位'
        },
        {
          keyName: 'placeName',
          type: 'BaseInput',
          disabled: this.editModel == 0,
          label: '小区名称'
        },
        {
          keyName: 'placeAddress',
          type: 'BaseInput',
          disabled: this.editModel == 0,
          label: '房屋地址'
        },
        {
          keyName: 'houseNum',
          type: 'BaseInput',
          disabled: this.editModel == 0,
          label: '门牌号'
        },
        {
          keyName: 'builtArea',
          type: 'BaseInputNumber',
          disabled: this.editModel == 0,
          label: '建筑面积(m²)'
        },
        {
          keyName: 'houseUseId',
          disabled: this.editModel == 0,
          label: '房屋用途',
          type: Selector,
          attrs: {
            selectType: '3',
            urlType: 'office'
          }
        },
        {
          keyName: 'houseAmount',
          type: 'BaseInputNumber',
          disabled: this.editModel == 0,
          label: '房产原值(元)'
        },

        {
          keyName: 'buyHouseDaye',
          type: 'a-date-picker',
          placeholder: '请选择日期',
          disabled: this.editModel == 0,
          label: '购房时间',
          attrs: {
            valueFormat: 'YYYY-MM-DD'
          }
        },
        {
          keyName: 'propertyFeeAmount',
          type: 'BaseInputNumber',
          disabled: this.editModel == 0,
          label: '物业费(元/月)'
        },
        {
          keyName: 'status',
          disabled: this.editModel == 0,
          type: 'a-radio-group',
          label: '状态',
          data: [
            {
              label: '可用',
              value: 0
            },
            {
              label: '不可用',
              value: 1
            }
          ]
        }
      ]
    }
  },
  methods: {
    /**
     * 提交表单
     */
    handleSubmit() {
      let that = this
      let api = [updateHomeOwnership, addHomeOwnership][that.editModel - 1] // 根据操作切换url地址
      // 校验表单
      that.$refs.ruleForm.validate((e) => {
        if (e) {
          // 提交表单
          that.loading = true
          let form = that.$clone(that.form)
          api(form)
            .then(() => {
              that.loading = false
              that.$message.success('提交成功！')
              that.$multiTab.close()
            })
            .catch(() => {
              that.loading = false
            })
        }
      })
    },
    handleClose() {
      if (this.isAudit) {
        window.close()
      } else {
        this.$multiTab.close(this.$route.fullpath)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.file_prompt {
  color: #999;
}
</style>